<template>
  <div>

    <carTitle :isShow1="isShow1" :isShow2="isShow2" :isShow3="isShow3">
      <span slot="title-one" class="title-one">历史轨迹</span>

      <span slot="title-two" class="title-two">新增车辆说明说明</span>
    </carTitle>

    <div class="mycar-body">
      <el-row>
        <el-col :span="23" class="body-wrapper">
          <el-row :gutter="10">
            <div id="hist-router">
              <router-link to="/moto/hist/one" class="hist-router" tag="span" active-class="hist-act">
                历史轨迹
              </router-link>
              <router-link to="/moto/hist/two" class="hist-router" tag="span" active-class="hist-act">
                历史流量
              </router-link>
              <p id="his-right">
                <span>车牌号：津AW7668</span>
                <span>司机姓名：李桂永</span>
                <span>随车号码：1220202020</span>
              </p>
            </div>
          </el-row>
          <el-row>
            <div class="router-body">
              <router-view></router-view>
            </div>
          </el-row>
        </el-col>

      </el-row>

    </div>


  </div>
</template>

<script>
  import carTitle from '@/components/car-title'
  import sel from '@/components/select'
  export default {
    data(){
      return {
        value: '',
        inputa: '',
        inputb: '',
        inputc: '',
        inputd: '',
        valuea: '23',
        optionsa: [
          {
            value: '选项1',
            label: '黄金糕'
          }, {
            value: '选项2',
            label: '双皮奶'
          }, {
            value: '选项3',
            label: '蚵仔煎'
          }, {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }],
        valueb: '2',
        optionsb: [
          {
            value: '选项1',
            label: '黄金糕'
          }, {
            value: '选项2',
            label: '双皮奶'
          }, {
            value: '选项3',
            label: '蚵仔煎'
          }, {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }],
        valuec: '1',
        optionsc: [
          {
            value: '选项1',
            label: '黄金糕'
          }, {
            value: '选项2',
            label: '双皮奶'
          }, {
            value: '选项3',
            label: '蚵仔煎'
          }, {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }
        ],
        valued: '1',
        optionsd: [
          {
            value: '选项1',
            label: '黄金糕'
          }, {
            value: '选项2',
            label: '双皮奶'
          }, {
            value: '选项3',
            label: '蚵仔煎'
          }, {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }],
        isShow1: false,
        isShow2: true,
        isShow3: false
      }
    },
    components: {
      carTitle,
      sel
    }
  }
</script>
<style lang="scss">
  .title {
    padding: 35px 0 33px 30px;
    .title-one {
      font-size: 20px;
      line-height: 20px;
      font-weight: 700;
      color: #3149a9 !important;
    }
    .title-two {
      line-height: 20px;
      font-size: 14px;
      color: #8b9aaf;
    }
    i {
      font-size: 20px;
      font-weight: 700;
      color: #acafc2;
    }
  }

  .body-wrapper {
    background: #ffffff;
    margin-left: 30px;
    padding: 30px 20px;
    border: 1px solid #e7e8ed;
    .right-title {
      text-align: right;
      padding-right: 15px;
      line-height: 36px;
      height: 36px;
      font-weight: 800;
      color: #AEB5BF;
      font-size: 14px;
    }
    .el-row {
      margin: 10px 0;
    }
    .hist-router {
      display: inline-block;
      width: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #3052AC;
      border: 1px solid #3052AC;
    }
    #hist-router {
      border-bottom: 2px solid #3052AC;
    }
    #his-right {
      float: right;
      line-height: 30px;
    }
    .router-body {
      /*height: 300px;*/
      min-height: 400px;
      width: 100%;
      background-color: #f2f3f3;
    }
    .hist-act{
      background-color: #3052AC;
      color: #ffffff!important;
    }
  }


</style>
